<template>
  <div class="notice_add">
    <el-dialog title="发布公告" :visible.sync="isShow" center :before-close="close">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-position="left" label-width="120px">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item label="接收角色" prop="role_id">
          <el-select v-model="form.role_id" placeholder="请选择公告人群" multiple collapse-tags>
            <el-option
              v-for="item in noticeRolesOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公告摘要" prop="abstract">
          <el-input v-model="form.abstract" placeholder="请输入公告摘要"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="news">
          <!-- <el-input
            type="textarea"
            :rows="5"
            v-model="form.news"
            maxlength="500"
            placeholder="请输入公告内容">
          </el-input> -->
          <editor-bar v-model="form.news" :isClear="isClear" @change="change"></editor-bar>
        </el-form-item>
        <el-form-item label="发布人" prop="publisher">
          <el-input v-model="form.publisher" placeholder="请输入发布人,如不输入发布人，发布人为：溟宇科惠"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from '~/components/editor.vue'
export default {
  data () {
    return {
      isShow: false,
      form: {
        title: '',
        news: '',
        abstract: '',
        role_id: [],
        publisher: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入公告标题', trigger: 'change' }
        ],
        abstract: [
          { required: true, message: '请输入公告摘要', trigger: 'change' }
        ],
        news: [
          { required: true, message: '请输入公告内容', trigger: 'change' }
        ],
        role_id: [
          { required: true, message: '请选择接收角色', trigger: 'change' }
        ],
        publisher: [
          { message: '请输入发布人', trigger: 'change' }
        ],
      },
      noticeRolesOption: [
        {
          label: '代理人',
          value: '2'
        },
        {
          label: '审核员',
          value: '3'
        },
        {
          label: '流程人员',
          value: '4'
        },
        {
          label: '发明人',
          value: '5'
        },
      ],
      isClear: false,
      editor: {
        info: ''
      },
    }
  },
  components: {
    EditorBar
  },
  methods: {
    change(val) {
      this.editor.info1 = val
    },
    show() {
      this.isShow = true
    },
    close() {
      this.$refs['ruleForm'].resetFields()
      this.form.news = ''
      this.isShow = false
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitPost()
        } else {
          return false;
        }
      })
    },
    submitPost () {
      
      let params = {
        title: this.form.title,
        news: this.form.news,
        abstract: this.form.abstract,
        role_id: this.form.role_id.join(',')
      }
      if (this.form.publisher != '') {
        params.publisher = this.form.publisher
      }
      this.$axios.post('api/news', params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message:"发布成功！"
          })
          this.$emit('refresh')
          this.close()
        }
      })
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .notice_add {
    .el-dialog {
      min-width: 880px;
      width: 60%;
    }
    .el-select {
      width: 100%;
    }
    .editor {
      border-radius: 4px;
      width: 100%;
    }
  }
</style>
